<template>
    <fieldset>
        <legend>Cart</legend>
        <h1>{{ name }}</h1>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <b>产品:{{ item.title }}</b>
                ---
                <b>价格:{{ item.price }}</b>
                ---
                <b>数量:{{ item.count }}</b>
            </li>
        </ul>
        <h2>总价格:{{ total.toFixed(2) }}</h2>
    </fieldset>
</template>
<script>
import { mapState, mapGetters } from "vuex"
export default {
    computed: {
        ...mapState("Cart", ['name', 'carts']),
        ...mapGetters('Cart', ['total'])
    }
}
</script>
<style scoped>
h2 {
    text-align: right;
    color: red
}
</style>